<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    {% load static %}
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>天天生鲜-注册</title>
	<link rel="stylesheet" type="text/css" href="{% static 'css/reset.css' %}">
	<link rel="stylesheet" type="text/css" href="{% static 'css/main.css' %}">
	<script type="text/javascript" src="{% static 'js/jquery-1.12.4.min.js' %}"></script>
	<script type="text/javascript" src="{% static 'js/register.js' %}"></script>
</head>
<body>
	<div class="register_con">
		<div class="l_con fl">
			<a class="reg_logo"><img src="{% static 'images/logo02.png' %}"></a>
			<div class="reg_slogan">足不出户  ·  新鲜每一天</div>
			<div class="reg_banner"></div>
		</div>

		<div class="r_con fr">
			<div class="reg_title clearfix">
				<h1>用户注册</h1>
				<a href="{% url 'goods:login' %}">登录</a>
			</div>
			<div class="reg_form clearfix">
				<form method="post" action="{% url 'goods:register' %}">
                    {% csrf_token %}

				<ul>
					<li>
						<label>用户名:</label>
						<input type="text" name="user_name" id="user_name">
						<span class="error_tip">提示信息</span>
					</li>
					<li>
						<label>密码:</label>
						<input type="password" name="pwd" id="pwd">
						<span class="error_tip">提示信息</span>
					</li>
					<li>
						<label>确认密码:</label>
						<input type="password" name="cpwd" id="cpwd">
						<span class="error_tip">提示信息</span>
					</li>
					<li>
						<label>邮箱:</label>
						<input type="text" name="email" id="email">
						<span class="error_tip">提示信息</span>
					</li>

                    <li>
						<label>手机号:</label>
						<input type="text" name="phone" id="phone">
                        <input type="button" id="sendsms" value="发送">
                        <span id="msg" style="color: red;font-size: 15px" ></span>

					</li>
                    <li>
                        <label>验证码：</label>
                        <input type="text" name="code" id="smscode" placeholder="验证码" style="width: 235px;height: 40px;" >
                    </li>

					<li class="agreement">
						<input type="checkbox" name="allow" id="allow" checked="checked">
						<label>同意”天天生鲜用户使用协议“</label>
						<span class="error_tip2">提示信息</span>
					</li>
					<li class="reg_sub">
						<input type="submit" value="注 册" name="">
					</li>
				</ul>
				</form>
                <span style="color: red">{{ error_msg }}</span>
			</div>

		</div>

	</div>

	<div class="footer no-mp">
		<div class="foot_link">
			<a href="#">关于我们</a>
			<span>|</span>
			<a href="#">联系我们</a>
			<span>|</span>
			<a href="#">招聘人才</a>
			<span>|</span>
			<a href="#">友情链接</a>
		</div>
		<p>CopyRight © 2016 北京天天生鲜信息技术有限公司 All Rights Reserved</p>
		<p>电话：010-****888    京ICP备*******8号</p>
	</div>
    <style type="text/css">
        #sendsms{
            width:90px;
            height: 40px;
            background-color: lightseagreen;
            position: relative;
            font-family: 华文行楷;
            font-size: 25px;
            text-align: center;

        }
        #sendsms:active{
            top: 2px;
        }
        #phone{
            width:195px;
            height: 40px;
            font-family: 幼圆;
            font-size: 20px;
        }
        input{
            font-size: 20px;
            font-family: 幼圆;

        }
    </style>
    <script type="text/javascript">
        // 短信发送
        $(function () {
            var btn1 = $('#sendsms');
            var count = 5;
            var timer =null;

            // 事件
            btn1.click(function () {
                phone = $('#phone').val();
                if (phone==""){
                    alert('请输入电话号码');
                    return false;
                }
                //执行ajax
                $.ajax({
                        type:'get',
                        url:'/phone/',
                        data:'phone='+phone,
                        success:function (msg) {
                            console.log("Data Saved:" + msg);
                            // 转换为json
                            obj = eval("("+msg+")");
                            console.log("结果:"+obj.Message);
                            if(obj.Message=='OK'){
                                $('#msg').html("短信发送成功")
                            }else {
                                $('#msg').html('短信发送失败')
                            }
                        },
                    error:function (res) {
                            // 状态码
                        console.log(res.status)
                    }
                });
                // end --发送ajax
                //特效
                //禁用
                $(this).attr("disable",'true');
                var _this= $(this);
                // 定时器实现时间每次减少1
                timer = setInterval(function () {
                    count--;
                    console.log("剩余时间:"+count);
                    if(count>=0){
                        //this 表示对象  表示定时器
                        // this.innerHTME=“剩余时间”+count
                        _this.html(count+"秒s后重发")
                    }else {
                        _this.disable = false;
                        clearInterval(timer);
                        _this.html("重新发送");
                        count=5;
                        $('#sendsms').removeAttr("disabled")
                    }
                },1000);
            });
            // 特效 end
            // 短信验证
            $("#smscode").change(function () {
                // 验证ajax
                var phone = $('#phone').val();
                var code = $(this).val();

                $.ajax({
                    type:'get',
                    url:'/re_phone/',
                    data:"phone="+phone+"&code="+code,
                    success:function (msg) {
                        console.log("Data Saved:" + msg );
                        // 已经成为json
                        if(msg.code==200){
                            alert("成功");
                            $('#msg').html("验证码正确")
                        }else {
                            $('#msg').html("手机验证码输入错误")
                        }
                    },
                    error:function (res) {
                        //状态码
                        console.log(res.status);
                        alert("服务器连接失败")
                    }
                });
                // 验证ajax
            })
        })// 短信验证


    </script>
	
</body>
</html>